<template>
    <el-dialog v-model="addDialog" title="学生就业信息添加" width="800">
        <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="学号" label-width="80" :required="true" prop="studentId">
                        <el-input autocomplete="off" v-model="formData.studentId" readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作城市" label-width="80" :required="true" prop="workCity">
                        <div style="height: 32px;">
                            <el-cascader v-model="formData.workCity" placeholder="请选择" :options="pcaTextArr" style="width: 168px;"
                                size="large" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作公司" label-width="80" prop="workCompany">
                        <el-input autocomplete="off" v-model="formData.workCompany" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作岗位" label-width="80" prop="workPosition">
                        <el-input autocomplete="off" v-model="formData.workPosition" style="height: 32px;width: 168px;"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入职日期" label-width="80" prop="startDate">
                        <div class="block">
                            <el-date-picker v-model="formData.startDate" type="date" placeholder="请选择" :size="size" style="width: 168px;"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="离职日期" label-width="80" prop="endDate">
                        <div class="block">
                            <el-date-picker v-model="formData.endDate" type="date" placeholder="请选择" :size="size" style="height: 32px;width: 168px;"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="薪资" label-width="80" prop="salary">
                        <el-input-number
                        v-model="formData.salary"
                        :min="0"
                        :max="99999999"
                        :controls="false"
                        size="large"
                        @change="handleChange"
                        style="height: 32px;width: 168px;"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialog = false">关闭</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
                <el-button @click="save(formRef)" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineEmits, defineModel } from "@vue/runtime-core";
import { reactive, ref } from "vue";
import axios from '@/axios/index.js'
import { ElMessage } from "element-plus";
import { pcaTextArr } from 'element-china-area-data';


let addDialog = defineModel('addEmpDialog')
const formRef = ref()
const emit = defineEmits(['loadStudentData'])
let rowData = defineProps(['rowData'])
let formData = reactive({})

function reset() {
    formData.id = rowData.rowData.id,
        formData.studentId = rowData.rowData.studentId,
        formData.workCity = '',
        formData.workCompany = '',
        formData.workPosition = '',
        formData.startDate = '',
        formData.endDate = '',
        formData.salary = ''
}

reset()

// 表单校验规则  
const formRules = reactive({
    studentId: [
        { required: true, pattern: '^[0-9]{9}$', message: '学号应为 9 位数字', trigger: 'blur' }
    ],
    workCity: [
        { required: true, message: '工作城市不能为空', trigger: 'blur' }
    ],
    workCompany: [
        { required: true, message: '工作公司不能为空', trigger: 'blur' }
    ],
    workPosition: [
        { required: true, message: '工作岗位不能为空', trigger: 'blur' }
    ],
    startDate: [
        { required: true, type: 'date', message: '入职时间不能为空', trigger: 'blur' }
    ] ,
    salary: [  
        { required: true, message: '薪资不能为空', trigger: 'blur' },  
        { type: 'number', min: 0, message: '薪资不能低于0', trigger: 'blur' },  
        { type: 'number', max: 99999999, message: '薪资不能超过99999999', trigger: 'blur' }  
    ]  
});

//保存就业信息
function save() {
    axios.post('/employment/addEmploymentInfo', formData).then(resp => {
        ElMessage({
            message: resp.data.message,
            type: resp.data.code == 200 ? 'success' : "error",
            duration: 1500,
            onClose: function () {
                addDialog.value = false
                emit('loadStudentData')
                //清除表单数据
                resetForm()
            }
        })
    })
}

//重置表单校验
const resetForm = (formEl) => {
    reset()
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.demo-form-inline {
    margin-left: 30px;
}

.demo-form-inline el-input {
    --el-input-width: 220px;
}

.demo-form-inline el-radio-group {
    --el-input-width: 220px;
}

.demo-form-inline el-date-picker {
    --el-input-width: 220px;
}

.avatar-uploader el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader el-upload:hover {
    border-color: var(--el-color-primary);
}

el-icon.avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 40px;
    height: 40px;
    display: block;
}
</style>